//加鼠标移入移出事件
let lists = document.querySelectorAll(".headerNav_left li")
// console.log(lists)
lists.forEach(function (v) {
  v.onmouseover = function () {
    // console.log(this)
    this.classList.add("listAll")
    // console.log(this.firstElementChild)
    this.firstElementChild.style.color = "#ff6699"
  }
  v.onmouseout = function () {
    this.classList.remove("listAll")
    this.firstElementChild.style.color = "#555"
    lists[1].firstElementChild.style.color = "#ff6699"
    // console.log(lists[0])
  }
})

//获取t 的值渲染页面
console.log(location.search)
let obj = new URLSearchParams(location.search)
// console.log(obj)
//获取对应的参数 对应的key的value
let typeid = obj.get("t")
console.log(typeid) //144
let page = 1
let contUrl = `https://api5.hanfuhui.com/Product/GetProductListPublic?count=40`
axios.get(contUrl, { params: { page, typeid } }).then(function (r) {
  console.log(r)
  let contArr = r.data.Data
  console.log(contArr)
  let contStr = contArr.map(
    (v) => `
  <li>
  <a href="#"><img src="${v.FaceSrc + "_250x250.jpg"}" alt="" /></a>
  <p class="price"><span>${"￥" + v.PriceRange}</span></p>
  <p class="name">
    <a href="#"
      >${v.Name}</a
    >
  </p>
  <p class="other">
    <a href="#">${v.Shop.Name}</a>
    <i>包邮</i>
  </p>
</li>
  `
  )
  document.querySelector("#contList").innerHTML = contStr.join("")
})

let activeAll = document.querySelectorAll(".pets a")
console.log(activeAll)
//循环遍历
activeAll.forEach(function (v) {
  console.log(v.href.substring(56))
  //截取字符串后面的分类名的t 判断类名t和typeid相等对应的添加一个类名active
  if (v.href.substring(56) == typeid) {
    v.classList.add("active")
  }
})
let btns = document.querySelectorAll(".footer_content p")
// console.log(btns)
let btnSpan = document.querySelectorAll(".footer_content span")
btns.forEach(function (v) {
  v.addEventListener("click", function () {
    console.log(this.innerHTML)
    let page = this.innerHTML

    btns.forEach((v) => v.classList.remove("active"))
    v.classList.add("active")
    //content
    let contUrl = `https://api5.hanfuhui.com/Product/GetProductListPublic?count=40`
    // let page = 1
    axios.get(contUrl, { params: { typeid, page } }).then(function (r) {
      console.log(r)
      let contArr = r.data.Data
      console.log(contArr)
      let contStr = contArr.map(
        (v) => `
        <li>
        <a href="#"><img src="${v.FaceSrc + "_250x250.jpg"}" alt="" /></a>
        <p class="price"><span>${"￥" + v.PriceRange}</span></p>
        <p class="name">
            <a href="#"
            >${v.Name}</a
            >
        </p>
        <p class="other">
            <a href="#">${v.Shop.Name}</a>
            <i>包邮</i>
        </p>
        </li>
        `
      )
      document.querySelector("#contList").innerHTML = contStr.join("")
    })
  })
})

//回到顶部
var btn = document.querySelector("#toTop")
window.onscroll = function () {
  if (document.documentElement.scrollTop > 500) {
    btn.style.opacity = "1"
  } else {
    btn.style.opacity = "0"
  }
}
btn.onclick = function () {
  // document.documentElement.scrollTop = 0;//
  document.documentElement.scrollTo({
    top: 0,
    //滚动的行为平滑
    behavior: "smooth",
  })
}
